<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li name = "3">3</li>
    <li class="item" title = "vue 牛逼">4</li>
    <li>5</li>
  </ul>
  <script>
    const box = document.getElementsByClassName('list')[0]
    const nodes = box.childNodes
    const currentNode = document.getElementsByClassName('item')[0]
    // function normalize(nodes) {
    //   for(let i = 0; i < nodes.length; i++) {
    //     const node = nodes[i]
    //     if(node.nodeType === 1) {
    //       console.log(node)
    //     }
    //   }
    // }
    // normalize(nodes)
    // function getPreviousSiblingElement(node) {
    //   let previousNode = node.previousSibling
    //   while(previousNode.nodeType !== 1) {
    //     previousNode = previousNode.previousSibling
    //   }
    //   return previousNode
    // }
    // function getNextSibling(node) {
    //   let nextNode = node.nextSibling
    //   if(nextNode.nodeType != 1){
    //    return getNextSibling(nextNode)
    //   }else {
    //     return nextNode
    //   }
    // }
    // console.log(getPreviousSiblingElement(currentNode))
    // console.log(getNextSibling(currentNode))


    // fristChild  lastChild
    // console.log(box.firstChild)
    // console.log(box.lastChild)
    // console.log(currentNode.parentNode)
    // console.log(box.hasChildNodes())
    // console.log(box.ownerDocument)

    // 操作节点
    const div = document.createElement('li')
    div.innerText = 'hello'
    box.appendChild(div)
    box.insertBefore(div,currentNode)
    box.appendChild(currentNode) // 如果传入一个已经存在的节点，那么将会移动这个节点
    // 一个节点只能存在一个文档中
    // replaceChild(插入的节点，替换的节点)
    // removeChild() 移除节点

    // cloneNode() cloneNode(true)  都不会复制时间处理程序

    // normalize

    document.title = 'vue'
    console.log(document.URL) // 获取URL
    console.log(document.domain) // 获取域名
    console.log(document.referrer) // 返回连接到当前页面的URL


    const list = document.getElementsByTagName('li')
    // getElementsByName() 常用于单选按钮
    console.log(list.namedItem('3'))

    // console.log(document.__proto__)
    // document 是 HTMLDocument对象的实例
    let hasXmlDom = document.implementation.hasFeature("XML", "1.0")
    console.log(hasXmlDom)
  </script>
</body>
</html>